<template>
	<view>
		<view class="head">
			<view class="head-box" @click="toPage('/sub-personal/home/home')">
				<view class="left">
					<image :src="userInfo.avatarUrl" class="img"></image>
					<view class="text">
						{{userInfo.nickName}}
					</view>
				</view>
				<image src="../../static/images/icon/right.png" class="right-img"></image>
			</view>
		</view>

		<view class="nav">
			<view class="" v-for="(item,index) in navList" :key="index" @click="toPage(item.url)">
				<view class="item" v-if="item.role<=role">
					<view class="left">
						<image :src="item.img" class="img"></image>
						<view class="">{{item.text}}</view>
					</view>
					<image src="../../static/images/icon/right.png" class="right-img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				userInfo: null,
				role: 1, // 1普通用户 2超级用户 3管理员
				navList: [
					// {
					// 	img: '../../static/images/icon/my-nav1.png',
					// 	text: '我的diy',
					// 	url: '/sub-personal/gallery/gallery',
					// 	role: 1,
					// },
					// {
					// 	img: '../../static/images/icon/my-nav3.png',
					// 	text: '我的绘画',
					// 	url: '/sub-personal/gallery-ai/gallery-ai',
					// 	role: 1,
					// }, 
					{
						img: '../../static/images/icon/my-nav4.png',
						text: '管理',
						url: '/sub-personal/admin/admin',
						role: 3,
					},
					{
						img: '../../static/images/icon/my-nav5.png',
						text: '关于我们',
						url: '/sub-personal/about/about',
						role: 1,
					}
				]
			}
		},
		computed: {},
		watch: {},
		methods: {
			toPage(e) {
				if (e) {
					uni.navigateTo({
						url: e
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '未完善'
					})
				}

			},
			login() {
				//用户注册/登录		
				let info = {
					nickName: "微信用户",
					avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
				}
				wx.cloud.callFunction({
					name: 'login',
					data: info
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '自动登录',
					})
					uni.setStorageSync('userInfo', res.result.data)
					this.getInfo()
				})
			},
			// 获取缓存的用户信息
			getInfo() {
				let info = uni.getStorageSync('userInfo')
				this.userInfo = info
				// console.log(info)
				this.role = this.userInfo.role
			},
		},
		onLoad(options) {
			this.login()
		},
		onShow() {
			this.getInfo()
		},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {
			return {
				title: '啊吧卡牌',
				path: '/pages/index/index',
			}
		},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	.right-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 30rpx;
	}

	.head {
		background-color: #fff;

		.head-box {
			font-size: 30rpx;
			margin-top: 20rpx;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.login-btn {
				width: 750rpx;
				height: 120rpx;
				display: flex;
				align-items: center;
				background-color: #fff;
				font-size: 30rpx;

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}

			.left {
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}

		}

	}

	.nav {
		margin-top: 20rpx;

		.item {
			margin-bottom: 10rpx;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;

			.left {
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				.img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.quit {
		margin-top: 20rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
</style>
